<template>
    <div>
<van-nav-bar title="首页" />
<ss></ss>
<van-tabs v-model:active="active" animated>
  <van-tab title="首页">
    <lbt :images="img"></lbt>
<van-grid :column-num="4">
  <van-grid-item v-for="value in catitemsdata " :key="value" :icon="value.image_src" :text="value.name" />
</van-grid>
<div style="font-size: 25px;" @click="dj">
<p>更多推荐<van-icon name="apps-o"/></p>
</div> 
<div v-show="xs">
    <h2>秒杀</h2>
    <p>距离结束还有{{miao}}秒</p>
</div>

<div v-for="key in floordata " :key="key">
<img :src="key.floor_title.image_src" alt="" width="100%">
<div  v-for="key in key.product_list " :key="key" style="float: left; margin: 2px;">
<img :src="key.image_src" alt="" width="120px" height="120px">
</div>
</div>
  </van-tab>
  <van-tab title="推荐" class="tj">
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </van-tab>
  <van-tab title="娱乐">内容 3</van-tab>
  <van-tab title="电影">内容 4</van-tab>
  <van-tab title="电视剧">内容 3</van-tab>
  <van-tab title="动漫">内容 4</van-tab>
</van-tabs>


    </div>
</template>

<script setup>
import { ref } from "vue";
import lbt from '@/components/lbt.vue'
import ss from '@/components/ss.vue'
import { swiperdataApi,catitemsApi,floordataApi } from "@/api/api";
import router from "@/router";
let img=ref([])
let catitemsdata=ref([])
let floordata=ref([])
swiperdataApi().then(res=>{
    console.log('tu',res);
    img.value=res.data.message
})
catitemsApi().then(res=>{
    console.log('gg',res);
    catitemsdata.value=res.data.message
})
floordataApi().then(res=>{
    console.log('lc',res);
    floordata.value=res.data.message
})
let miao=ref(10)
let xs=ref(true)
setInterval(()=>{
    miao.value--
    if(miao.value==0){
       xs.value=false
    }
},1000)
const dj=()=>{
router.push('/home/fen')
}
</script>

<style lang="scss" scoped>
.tj{
    column-gap: 20px;
    column-count: 2;
}
.tj div{
    width: 150px;
    height: 300px;
    background-color: aqua;
    border: pink 1px solid;
    float: left;
    margin: 3px;
}
</style>